<template>
	<div class="container">
		<el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
			<el-table-column prop="number" label="托盘编号" />
			<el-table-column prop="cnumber" label="托盘重量(KG)" />
			<el-table-column prop="remark" label="托盘备注" />
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="eventOnButtonOperate('details', scope.$index)" type="text" size="small">查看详情</el-button>
                </template>
            </el-table-column>
		</el-table>
		<el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total" :page-sizes="[10, 50, 100, 200, 300]"
            layout="total, sizes, prev, pager, next, jumper"
        />
        <el-drawer :visible.sync="drawer.show" @close="eventInitNormalState" direction="ltr" size="60%">
            <div class="quoted-price-contianer">
                <stock-tray v-if="details.show == false" :details="drawer.item" @switchDetails="onSwtichTrayDetails" />
                <stock-tray-details v-if="details.show" :details="details.item" />
            </div>
        </el-drawer>
	</div>
</template>

<script>
	import {
		Table, TableColumn, Pagination,
		Button, Select, Option,
		Drawer, Dialog,
		MessageBox, Message, Switch
    } from 'element-ui';
    
    import StockTray from './stock-tray.vue';
    import StockTrayDetails from './stock-tray-details.vue';

	export default {
		components: {
			[Table.name]: Table, [TableColumn.name]: TableColumn, [Pagination.name]: Pagination,
			[Button.name]: Button, [Select.name]: Select, [Option.name]: Option,
            [Drawer.name]: Drawer, [Dialog.name]: Dialog, [Switch.name]: Switch,
            StockTray, StockTrayDetails
		},
		data() {
			return {
				dataset: {
					loading: false,
					total: 0, limit: 10, page: 1,
					items: []
                },
                drawer: {
                    show: false, item: {}
                },
                details: {
                    show: false,
                    item: {}
                }
			}
		},
		mounted() {
			this.controllerRequestListDataset();
		},
		methods: {
			controllerRequestListDataset(page) {
				if (this.dataset.loading) return; else this.dataset.loading = true;
				if (page) this.dataset.page = page;
				var url = '/api/admin/tray/getlist',
					params = {
						page: this.dataset.page - 1, list_rows: this.dataset.limit
					};
				this.$util.postRequestInterface(url, params, {
					success: (res) => {
						this.dataset.total = res.data.count;
						this.dataset.items = res.data.data;
						for (var i = 0; i < this.dataset.items.length; i++) {
							this.dataset.items[i].status = this.dataset.items[i].status == 1 ? true : false;
						}
					},
					complete: (e) => {
						this.dataset.loading = false;
					}
				});
			},
			eventUpdateRequestLimit(limit) {
				if (this.dataset.loading) return;

				this.dataset.limit = limit;
				this.dataset.page = 1;
				this.dataset.total = 0;

				this.controllerRequestListDataset();
            },
            eventOnButtonOperate(mode, index) {
                this.drawer.show = true;
                this.drawer.item = this.dataset.items[index];
            },
            onSwtichTrayDetails(params) {
                this.details.item = params;
                this.details.show = true;
            },
            eventInitNormalState() {
                this.details.show = false;
            }
		}
	}
</script>

<style lang="scss" scoped>
    .quoted-price-contianer {
        margin: 1.6rem 3.2rem;
        width: 414px;
        height: 736px;
        position: relative;
        overflow-y: auto;
    }
</style>
